<template>
	<view>
		<view class="load" v-if="!load">
			<u-loading-icon mode="circle" inactive-color="#fff" text="正在加载..." vertical></u-loading-icon>
		</view>
		<block v-else>
			<image class="pa_banner" mode="aspectFill" :src="pa_info.Banner"></image>
			<view class="navBox" :style="isNav ? 'background: #FFFFFF;' : ''">
				<topStatus></topStatus>
				<view class="nav_main">
					<uni-icons type="left" color="#333" size="30" @click="goBack()"></uni-icons>
					<view class="nav_tit" :style="{ 'opacity': isNav ? '1' : '0' }">
						{{ pa_info.PlaceName }}
					</view>
					<uni-icons type="left" color="#333" size="30" style="opacity: 0"></uni-icons>
				</view>
			</view>
			<view style="height: 498rpx"></view>
			<view class="pa_contbox">
				<view class="pa_namebox">
					<view class="name_left">
						<image class="addreimg"
							src="https://giftapp.oss-cn-shenzhen.aliyuncs.com/upload/17329525852691481.png"></image>
						<view class="name_til">{{ pa_info.PlaceName }}</view>
						<!-- <view class="name_til" @click="nav_to('/pages/store/pa_placard?id='+paID)">{{'分享'}}</view> -->
					</view>
					<view class="btn_titleBox">
						<view class="name_r" v-if="pa_info.IsZAN == 0" @click.stop="pl_ZAN">
							<image class="zan_icon"
								src="https://giftapp.oss-cn-shenzhen.aliyuncs.com/upload/1732952601417252.png"></image>
							<view class="zan_til">为家乡点赞</view>
						</view>
						<view class="name_r" v-else style="background:#999999;" @click.stop="pl_ZAN">
							<image class="zan_icon"
								src="https://giftapp.oss-cn-shenzhen.aliyuncs.com/upload/1732952601417252.png"></image>
							<view class="zan_til" style="font-size: 22rpx;">已为家乡点赞</view>
						</view>
						<!-- <view class="name_r" style="width:100rpx;margin-left: 18rpx;" v-if="pa_info.IsJoin == 0" @click.stop="pl_follow">
							<view class="zan_til">关注</view>
						</view>
						<view class="name_r" style="width:100rpx;margin-left: 18rpx;" v-if="pa_info.IsJoin == 1" @click.stop="cancelPl_follow">
							<view class="zan_til">已关注</view>
						</view> -->
						<view class="name_r share_btn" @click.stop="$refs.shareWX.open()">
							<image class="zan_icon"
								src="https://giftapp.oss-cn-shenzhen.aliyuncs.com/upload/1735876059980412.png"></image>
							<view class="zan_til">分享</view>
						</view>
					</view>
				</view>
				<view class="info_box">
					<view class="info" v-for="(item, index) in paOrder" :key="index">
						<view class="info_co">
							{{
								item.count > 1000
									? (item.count / 1000).toFixed(2) + 'k'
									: item.count > 1000000
										? (item.count / 1000000).toFixed(2) + 'M'
										: item.count > 100000000
											? (item.count / 100000000).toFixed(2)
											: item.count
							}}
						</view>
						<view class="info_name">{{ item.name }}</view>
					</view>
				</view>
				<view class="pa_dibox">
					<view :class="isDI ? 'di_cont2' : 'di_cont'">{{ pa_info.Description || '美丽家乡，和谐家园。' }}</view>
					<view class="more_tile" @click="di_all">{{ isDI ? '收起' : '展开' }}</view>
				</view>
				<!-- <view class="zanpr_box">
					<view class="pr_hdbox">
						<block v-for="(itme, index) in znaList" :key="index">
							<image class="hd_img" :src="itme.HeadImgUrl" mode="aspectFill" v-if="index < 10"></image>
						</block>
					</view>
					<view class="yi_zanbox">
						<view class="yi_zantil">已点赞</view>
					</view>
				</view> -->

				<!-- <view class="btn_body">
					<view class="btn_cell" @click="nav_to('/pages/store/pa_finance?id='+paID)">经营数据</view>
				</view> -->
			</view>
			<view class="heatbox" v-if="newFarmerList.length > 0">
				<view class="heattextbox">
					<image class="heat_img"
						src="https://giftapp.oss-cn-shenzhen.aliyuncs.com/upload/1732534745240412.png"></image>
					<view class="heat_til">新农人</view>

				</view>
				<view class="heat_shop_box">
					<view class="heat_shop" v-for="(item, index) in newFarmerList" :key="index"
						@click="nav_to('/pages/store/farm_detail?id=' + item.ID)">
						<image class="heat_spimg" :src="item.Banner" mode="widthFix"></image>
						<view class="heat_spname">{{ item.PlaceName }}</view>
					</view>
				</view>
			</view>
			<view class="shop_box">
				<!-- <view class="land_shop" v-if="newFarmerList.length > 0">
					<view class="land_tilbox">
						<image class="land_icon"
							src="https://giftapp.oss-cn-shenzhen.aliyuncs.com/upload/1732953632984775.png"></image>
						<view class="land_text">新农人</view>
					</view>
					<view class="loacl_shopbox">
						<view class="loashopcont" v-for="(value, i) in newFarmerList" :key="i"
							@click="nav_to('/pages/store/farm_detail?id=' + item.ID)">
							<image class="lo_shopimg" mode="aspectFill" :src="value.Banner"></image>
							<view class="lo_shopname hiddenText">{{ value.PlaceName }}</view>
						</view>
					</view>
				</view> -->
				<view class="land_shop" v-if="pa_info.PGIProductList.length > 0">
					<view class="land_tilbox">
						<image class="land_icon"
							src="https://giftapp.oss-cn-shenzhen.aliyuncs.com/upload/1732953632984775.png"></image>
						<view class="land_text">地理标志产品</view>
					</view>
					<view class="loacl_shopbox">
						<view class="loashopcont" v-for="(value, i) in pa_info.PGIProductList" :key="i"
							@click.stop="goDetail(value.ID)">
							<view class="shop_tag" :class="item.PromotionType == '预售' ? 'shop_tag_green' : ''"
								v-if="item.PromotionType">
								{{ item.PromotionType }}
							</view>
							<image class="lo_shopimg" mode="aspectFill" :src="value.Images.split(',')[0]"></image>
							<view class="lo_shopname hiddenText">{{ value.ProductName }}</view>
							<view class="lo_shopprice">
								<text class="lo_pricon">￥</text>
								{{ value.Price }}
							</view>
						</view>
					</view>
				</view>
				<view class="land_shop">
					<view class="land_tilbox">
						<image class="land_icon"
							src="https://giftapp.oss-cn-shenzhen.aliyuncs.com/upload/1732953647034592.png"></image>
						<view class="land_text">本馆优品</view>
					</view>
					<view class="shoplistbox">
						<view class="shopcont" v-for="(item, index) in shopList" :key="index"
							@click="goDetail(item.ID)">
							<view class="shop_tag" :class="item.PromotionType == '预售' ? 'shop_tag_green' : ''"
								v-if="item.PromotionType">
								{{ item.PromotionType }}
							</view>
							<image class="shopimg" :src="item.Images.split(',')[0]" mode="aspectFill"></image>
							<view class="shopname">{{ item.ProductName ? item.ProductName : '' }}</view>

							<view class="shop_label_cell">
								<block v-if="item.ProductPromotionList.length">
									<view class="shop_label" v-for="(el, i) in item.ProductPromotionList" :key="i">
										{{ el.Title }}
									</view>
								</block>
								<block v-else>
									<view class="shop_label" style="opacity:0">
										占位符
									</view>
								</block>

							</view>

							<view class="shop_pircebox">
								<view class="price_title">
									<text class="price_icon">￥</text>
									{{ item.Price }}
								</view>
								<view class="soid">{{ '已售' + (item.VirtualSellNum ? item.VirtualSellNum : 0) }}</view>
							</view>
						</view>
						<view class="call_tips" @click="telFun('13422132225')">
							如果您有当地的好产品，请联系我们<text>13422132225</text>
						</view>
					</view>
					<view style="height: 30rpx;"></view>
					<BtmLogo></BtmLogo>
				</view>
			</view>

		</block>

		<!-- 微信 分享 转发好友、朋友圈 -->
		<!-- #ifdef MP-WEIXIN -->
		<uni-popup ref="shareWX" type="bottom">
			<view class="x-share">
				<button hover-class="none" open-type="share" class="item" @click="$refs.shareWX.close()">
					<image src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/icon/wx_logo.png"
						style="margin-bottom: -8rpx"></image>
					<span style="margin-bottom: -18rpx; font-size: 32rpx">转发好友</span>
				</button>
				<button class="item" @click="wxSharePYQ()">
					<image src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/icon/pyq_logo.png"
						style="margin-bottom: -8rpx"></image>
					<span style="margin-bottom: -18rpx; font-size: 32rpx">分享朋友圈</span>
				</button>
				<button class="item" @click.stop="nav_to(`/pages/store/canvas?id=${pa_info.ID}`)">
					<image src="https://giftapp.oss-cn-shenzhen.aliyuncs.com/upload/1724923312810631.png"
						style="margin-bottom: -8rpx"></image>
					<span style="margin-bottom: -18rpx; font-size: 32rpx">生成海报</span>
				</button>
			</view>
		</uni-popup>

		<uni-popup ref="shareTips">
			<view class="share_tips">
				<view class="img_box">
					<image src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1715929661502368.png"
						mode="widthFix"></image>
				</view>
				<view class="tips_close" @click="$refs.shareTips.close()">我知道了</view>
			</view>
		</uni-popup>
		<!-- #endif -->
	</view>
</template>

<script>
import topStatus from '@/components/topStatus/topStatus.vue';
export default {
	components: {
		topStatus,
	},
	data() {
		return {
			paID: '',
			load: false,
			paOrder: [
				{
					count: 0,
					name: '上架商品(个)',
				},
				{
					count: 0,
					name: '销售数量(个)',
				},
				{
					count: 0,
					name: '累计销售(元)',
				},
				{
					count: 0,
					name: '人气热度',
				},
				{
					count: 0,
					name: '点赞人数',
				},
				{
					count: 0,
					name: '粉丝人数',
				},
			],
			pa_info: {
				PGIProductList: [],
			},
			shopList: [],
			PageIndex: 1,
			PageSize: 10,
			isMore: true,
			isNav: false,
			fixboxHeight: 100,
			isDI: false,
			znaList: [],
			newFarmerList: [],
		};
	},
	onLoad(e) {
		this.paID = e?.id;
		this.paDetail();
		this.getFarmer()
	},
	onReachBottom() {
		if (this.isMore) {
			this.PageIndex++;
			this.ProductList();
		}
	},
	onPageScroll(e) {
		// console.log(e.scrollTop);
		this.isNav = e.scrollTop > this.fixboxHeight ? true : false;
	},
	onShareAppMessage(res) {
		//发送给朋友

		return {
			title: `${uni.getStorageSync('user').Name}向您分享了${this.pa_info.PlaceName}`,
			path: `/pages/store/pa_detail?id=${this.paID}`,
			imageUrl: this.pa_info.Banner
		};
	},
	//分享朋友圈
	onShareTimeline() {
		return {
			title: `${uni.getStorageSync('user').Name}向您分享了${this.pa_info.PlaceName}`,
			query: `id=${this.paID}`,
		};
	},
	methods: {
		telFun(tel) {
			uni.makePhoneCall({
				phoneNumber: tel,
				success() {
					console.log('拨号成功');
				},
				fail(err) {
					console.error('拨号失败:', err);
				},
			});
		},
		di_all() {
			this.isDI = !this.isDI;
		},
		// 点击跳转详情
		goDetail(id) {
			this.nav_to(`/pages/shop/detail?id=${id}`);
		},
		goBack() {
			const pages = getCurrentPages();
			if (pages.length > 1) {
				// 如果页面栈长度大于1，则说明有上一页，可以返回
				uni.navigateBack();
			} else {
				// 如果没有上一页，则导航到首页
				uni.reLaunch({
					url: '/pages/tab/home',
				});
			}
		},
		async getFarmer() {
			let res = await this.$api.post('Place/NewFarmerList', {
				PageSize: 9999,
				PageIndex: 1,
				ID: this.paID,
			});
			if (res.code == 0) {
				this.newFarmerList = res.data
			}
		},
		async paDetail() {
			let userID = uni.getStorageSync('user').UserID || 0
			let res = await this.$api.post('Place/Detail', {
				ID: this.paID,
				userID: userID
			});
			if (res.code == 0) {
				this.pa_info = res.data;
				this.load = true;
				this.paOrder[0].count = res.data.PlaceData?.ProductNum || 0;
				this.paOrder[1].count = res.data.PlaceData?.TotalSaleQty || 0;
				this.paOrder[2].count = res.data.PlaceData?.TotalSaleMoney || 0;
				this.paOrder[3].count = res.data.HotValue;
				this.paOrder[4].count = res.data.ZAN;
				this.paOrder[5].count = res.data.PlaceData?.FansNum || 0;
				this.ZANUsers();
				this.ProductList();
			}
		},

		// 优品
		async ProductList() {
			let res = await this.$api.post('Place/ProductList', {
				PlaceID: this.pa_info.ID,
				PageIndex: this.PageIndex,
				PageSize: this.PageSize,
				ProductName: '',
			});
			if (res.code == 0) {
				if (this.PageIndex == 1) {
					this.shopList = res.data;
				} else {
					this.shopList = this.shopList.concat(res.data);
				}
				this.isMore = Array.isArray(res.data) && res.data.length >= this.PageSize;
			}
		},
		//点赞
		async pl_ZAN() {
			let res = await this.$api.post('Place/ZAN', {
				ID: this.pa_info.ID,
			});
			if (res.data) {
				this.$pv.msg('点赞成功');
				this.paDetail();
			}
		},
		async pl_follow() {
			let res = await this.$api.post('/Place/Focus', {
				ID: this.pa_info.ID,

			});
			if (res.data) {
				this.$pv.msg('关注成功');
				this.paDetail();
			}
		},
		async cancelPl_follow() {
			let res = await this.$api.post('/Place/CancelFocus', {
				ID: this.pa_info.ID,

			});
			if (res.data) {
				this.$pv.msg('已取消关注');
				this.paDetail();
			}
		},

		// 点赞的用户
		async ZANUsers() {
			let res = await this.$api.post('Place/ZANUsersList', {
				ID: this.pa_info.ID,
				PageIndex: 1,
				PageSize: 10,
			});
			if (res.code == 0) {
				this.znaList = res.data;
			}
		},
		wxSharePYQ() {
			this.$refs.shareWX.close();
			this.$refs.shareTips.open();
		},
	},
};
</script>
<style lang="scss">
page {
	background-color: #f6f6f6;
}

.navBox {
	width: 100%;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 10;

	.nav_main {
		padding: 0 14rpx;
		height: 44px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 36rpx;
		color: #fff;

		.nav_tit {
			font-size: 36rpx;
			font-weight: bold;
			//color: #fff;
			color: #333;
		}
	}
}

.pa_banner {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 584rpx;
	// background-color: skyblue;
	z-index: -2;
}

.pa_contbox {
	width: 702rpx;
	min-height: 540rpx;
	background: linear-gradient(180deg, #f7d8bf 0%, #ffffff 100%);
	border-radius: 24rpx;
	margin: 0 auto;
	padding: 36rpx 30rpx;

	.pa_namebox {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 18rpx;

		.btn_titleBox {
			display: flex;
			align-items: center;
		}

		.name_left {
			display: flex;
			align-items: center;

			.addreimg {
				width: 40rpx;
				height: 40rpx;
				min-width: 40rpx;
				margin-right: 8rpx;
			}

			.name_til {
				font-size: 36rpx;
				font-weight: bold;
			}
		}

		.name_r {
			width: 188rpx;
			height: 56rpx;
			background: #5d8bf8;
			border-radius: 28rpx;
			display: flex;
			align-items: center;
			justify-content: center;

			.zan_icon {
				width: 32rpx;
				height: 32rpx;
			}

			.zan_til {
				font-size: 24rpx;
				font-weight: bold;
				color: #fff;
			}
		}

		.share_btn {
			width: 120rpx;
			margin-left: 18rpx;
			background-color: #52d08e;

			.zan_icon {
				width: 36rpx;
				height: 36rpx;
			}
		}
	}

	.info_box {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		justify-content: center;

		.info {
			width: 212rpx;
			height: 132rpx;
			text-align: center;

			.info_co {
				font-size: 48rpx;
				font-weight: bold;
				color: #5d8bf8;
			}

			.info_name {
				font-size: 24rpx;
				color: #666666;
			}
		}
	}

	.pa_dibox {
		margin-bottom: 24rpx;

		.di_cont {
			width: 100%;
			font-size: 28rpx;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 3;
			overflow: hidden;
			text-overflow: ellipsis;
		}

		.di_cont2 {
			width: 100%;
			font-size: 28rpx;
		}

		.more_tile {
			font-size: 28rpx;
			color: #5d8bf8;
		}
	}

	.zanpr_box {
		display: flex;
		align-items: center;
		justify-content: flex-end;

		.pr_hdbox {
			display: flex;
			align-items: center;
			margin-right: 12rpx;

			.hd_img {
				width: 48rpx;
				height: 48rpx;
				border-radius: 50%;
				// background-color: skyblue;
				margin-left: -16rpx;
			}
		}

		.yi_zanbox {
			display: flex;
			align-items: center;

			.yi_zantil {
				font-size: 24rpx;
				color: #666666;
			}

			.r_arr {
				width: 24rpx;
				height: 24rpx;
			}
		}
	}

	.btn_body {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 32rpx auto;

		.btn_cell {
			// width: 47%;
			// height: 88rpx;
			font-size: 22rpx;
			border: 2rpx solid #ff4912;
			background: #ff4912;
			border-radius: 44rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #fff;
			padding: 12rpx 24rpx;
			margin-left: auto;
		}
	}
}

.heatbox {
	width: 702rpx;
	// height: 302rpx;
	margin: 20rpx auto;
	background-image: url('https://giftapp.oss-cn-shenzhen.aliyuncs.com/upload/17325278470281311.png');
	background-size: cover;
	background-repeat: no-repeat;
	border-radius: 18rpx;
	padding-bottom: 26rpx;

	.heattextbox {
		display: flex;
		align-items: center;
		width: 100%;
		padding: 26rpx 22rpx;
		box-sizing: border-box;

		.heat_til {
			font-size: 32rpx;
			font-weight: bold;
			margin-left: 8rpx;
		}

		.heat_img {
			width: 38rpx;
			height: 38rpx;
		}

		.heat_more {
			width: 128rpx;
			height: 44rpx;
			background: linear-gradient(90deg, rgba(250, 113, 52, 0.05) 0%, rgba(253, 151, 74, 0.21) 100%);
			border-radius: 24rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 24rpx;
			color: #5d8bf8;
			margin-left: auto;
		}
	}

	.heat_shop_box {
		overflow-x: auto;
		width: 100%;
		padding: 0 22rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;

		.heat_shop {
			width: 156rpx;
			margin-right: 16rpx;

			.heat_spimg {
				width: 156rpx;
				height: 156rpx;
				display: block;
				// background-color: red;
				border-radius: 16rpx;
			}

			.heat_spname {
				width: 156rpx;
				font-size: 24rpx;
				display: -webkit-box;
				/* 设置为WebKit内核的弹性盒子模型 */
				-webkit-box-orient: vertical;
				/* 垂直排列 */
				-webkit-line-clamp: 1;
				/* 限制显示两行 */
				overflow: hidden;
				/* 隐藏超出范围的内容 */
				text-overflow: ellipsis;
				/* 使用省略号 */

			}

			.heat_price {
				font-size: 32rpx;
				font-weight: bold;
				color: #5d8bf8;
			}

			.pr_icon {
				font-size: 20rpx;
				font-weight: bold;
				color: #5d8bf8;
			}
		}
	}
}

.shop_box {
	width: 100%;
	background: #ffffff;
	border-radius: 24rpx 24rpx 0 0;
	padding: 30rpx 24rpx;
	box-sizing: border-box;
	margin-top: 24rpx;
	padding-bottom: 100rpx;

	.land_shop {
		.land_tilbox {
			display: flex;
			align-items: center;
			margin-bottom: 24rpx;

			.land_icon {
				width: 40rpx;
				height: 40rpx;
				margin-right: 8rpx;
			}

			.land_text {
				font-size: 36rpx;
				font-weight: bold;
			}
		}

		.loacl_shopbox {
			width: 700rpx;
			margin: 0 auto;
			padding: 10rpx 0;
			min-height: 300rpx;
			display: flex;
			align-items: center;
			overflow-x: auto;

			.loashopcont {
				width: 212rpx;
				height: 300rpx;
				background: #ffffff;
				border-radius: 8rpx;
				text-align: center;
				margin-right: 8rpx;
				box-shadow: 0rpx 0rpx 6rpx #ccc;
				position: relative;

				.shop_tag {
					position: absolute;
					top: 0;
					left: 0;
					padding: 8rpx 12rpx;
					background-color: #FF471A;
					color: #fff;
					font-size: 22rpx;
					border-radius: 16rpx 0 16rpx 0;
				}

				.shop_tag_green {
					background-color: #1ed68d;
				}

				.lo_shopimg {
					width: 212rpx;
					height: 210rpx;
					border-radius: 8rpx 8rpx 0rpx 0rpx;
					background-color: skyblue;
				}

				.lo_shopname {
					width: 196rpx;
					margin: 0 auto;
					font-size: 24rpx;
				}

				.lo_shopprice {
					font-size: 28rpx;
					font-weight: bold;
					color: #5d8bf8;
					text-align: left;
					padding: 8rpx;
				}

				.lo_pricon {
					font-size: 24rpx;
					color: #5d8bf8;
				}
			}
		}
	}
}

.shoplistbox {
	width: 100%;
	display: flex;
	flex-wrap: wrap;

	.shop_label_cell {
		display: flex;
		flex-wrap: wrap;
		padding: 0 10rpx;

		.shop_label {
			height: 36rpx;
			border-radius: 8rpx;
			border: 1rpx solid #f91c1c;
			font-weight: 500;
			font-size: 20rpx;
			color: #f91c1c;
			margin: 5rpx;
			padding: 0 10rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.shop_con {
			opacity: 0;
			height: 20rpx;
		}
	}

	.shopcont {
		width: 342rpx;
		// height: 546rpx;
		background: #ffffff;
		border-radius: 16rpx;
		margin-right: 16rpx;
		margin-bottom: 16rpx;
		box-shadow: 0rpx 0rpx 6rpx #ccc;
		padding-bottom: 18rpx;
		position: relative;

		.shop_tag {
			position: absolute;
			top: 0;
			left: 0;
			padding: 8rpx 12rpx;
			background-color: #FF471A;
			color: #fff;
			font-size: 22rpx;
			border-radius: 16rpx 0 16rpx 0;
		}

		.shop_tag_green {
			background-color: #1ed68d;
		}

		.shopimg {
			width: 344rpx;
			height: 344rpx;
			// background-color: red;
			border-radius: 16rpx 16rpx 0rpx 0rpx;
		}

		.shopname {
			width: 312rpx;
			height: 74rpx;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
			overflow: hidden;
			text-overflow: ellipsis;
			margin: 16rpx auto;
			margin-bottom: 0;
			font-size: 28rpx;
			font-weight: bold;
		}

		.shop_pircebox {
			width: 312rpx;
			margin: 0 auto;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.price_title {
				font-size: 40rpx;
				font-weight: bold;
				color: #5d8bf8;
			}

			.price_icon {
				font-size: 28rpx;
				font-weight: bold;
				color: #5d8bf8;
			}

			.soid {
				font-size: 24rpx;
				color: #999999;
			}
		}
	}

	.call_tips {
		width: 100%;
		font-size: 22rpx;
		color: #999999;
		text-align: center;

		text {
			margin-left: 10rpx;
			font-size: 22rpx;
			color: #55aaff;
		}
	}
}

.shoplistbox .shopcont:nth-child(2n) {
	margin-right: 0rpx;
}

.x-share {
	background-color: #ffffff;
	width: 750rpx;
	border-radius: 20rpx 20rpx 0 0;
	padding: 40rpx 20rpx 80rpx;
	display: flex;
	box-sizing: border-box;

	.item {
		flex: 1;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;

		image {
			width: 64rpx;
			height: 64rpx;
			margin-bottom: 10rpx;
		}

		span {
			color: #2e2e2e;
		}
	}
}

.share_tips {
	width: 100vw;
	height: 100vh;
	padding-top: 200rpx;
	background-color: rgba(0, 0, 0, 0.6);
	position: relative;

	.img_box {
		width: 100%;
		display: flex;
		justify-content: center;
	}

	.tips_close {
		position: absolute;
		padding: 14rpx 24rpx;
		border-radius: 50rpx;
		border: 4rpx solid #fff;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #fff;
		font-size: 30rpx;
		font-weight: bold;
		top: 41%;
		left: 50%;
		transform: translate(-50%, 0);

		image {
			width: 100%;
			height: 100%;
		}
	}
}
</style>
